<script setup>
import { ref, onMounted, nextTick } from 'vue'

// 终端输出内容
const terminalOutput = ref([
  '欢迎使用基站管理系统命令行工具',
  '输入 "help" 查看可用命令',
  '----------------------------'
])

// 命令历史
const commandHistory = ref([])
const historyIndex = ref(-1)

// 当前输入的命令
const currentCommand = ref('')

// 终端输入框引用
const terminalInputRef = ref(null)
const terminalContainerRef = ref(null)

// 模拟命令响应
const mockCommandResponses = {
  'help': [
    '可用命令:',
    '  status          - 显示基站当前状态',
    '  start           - 启动基站',
    '  stop            - 停止基站',
    '  reboot          - 重启基站',
    '  config          - 查看当前配置',
    '  clear           - 清空终端',
    '  exit            - 退出命令行模式',
    '  help            - 显示帮助信息'
  ],
  'status': [
    '基站状态信息:',
    '  运行状态: 空闲',
    '  CPU使用率: 22%',
    '  内存使用率: 58%',
    '  连接数: 0'
  ],
  'start': [
    '正在启动基站...',
    '基站启动成功！'
  ],
  'stop': [
    '正在停止基站...',
    '基站已停止。'
  ],
  'reboot': [
    '正在重启基站...',
    '基站重启成功！'
  ],
  'config': [
    '当前配置信息:',
    '  收发模式: TX',
    '  中心频点: 3300870',
    '  小区ID: 1',
    '  RB Start: 0',
    '  RB Size: 50',
    '  MCS: 10'
  ],
  'clear': [],
  'exit': [
    '退出命令行模式...'
  ]
}

// 执行命令
function executeCommand(command) {
  if (!command.trim()) {
    return
  }
  
  // 添加命令到历史记录
  commandHistory.value.push(command)
  historyIndex.value = -1
  
  // 显示命令
  terminalOutput.value.push(`$ ${command}`)
  
  // 处理命令
  const lowerCommand = command.toLowerCase().trim()
  
  if (lowerCommand === 'clear') {
    // 清空终端
    terminalOutput.value = []
  } else if (mockCommandResponses[lowerCommand]) {
    // 显示命令响应
    mockCommandResponses[lowerCommand].forEach(line => {
      terminalOutput.value.push(line)
    })
  } else {
    // 未知命令
    terminalOutput.value.push(`未知命令: ${command}`)
    terminalOutput.value.push('输入 "help" 查看可用命令')
  }
  
  // 清空输入框
  currentCommand.value = ''
  
  // 滚动到底部
  nextTick(() => {
    scrollToBottom()
  })
}

// 处理键盘事件
function handleKeyDown(event) {
  if (event.key === 'Enter') {
    // 执行命令
    executeCommand(currentCommand.value)
  } else if (event.key === 'ArrowUp') {
    // 上一条命令
    event.preventDefault()
    if (commandHistory.value.length > 0) {
      if (historyIndex.value < commandHistory.value.length - 1) {
        historyIndex.value++
        currentCommand.value = commandHistory.value[commandHistory.value.length - 1 - historyIndex.value]
      }
    }
  } else if (event.key === 'ArrowDown') {
    // 下一条命令
    event.preventDefault()
    if (historyIndex.value > 0) {
      historyIndex.value--
      currentCommand.value = commandHistory.value[commandHistory.value.length - 1 - historyIndex.value]
    } else if (historyIndex.value === 0) {
      historyIndex.value = -1
      currentCommand.value = ''
    }
  }
}

// 滚动到底部
function scrollToBottom() {
  if (terminalContainerRef.value) {
    terminalContainerRef.value.scrollTop = terminalContainerRef.value.scrollHeight
  }
}

// 组件挂载后自动聚焦输入框
onMounted(() => {
  nextTick(() => {
    if (terminalInputRef.value) {
      terminalInputRef.value.focus()
    }
    scrollToBottom()
  })
})
</script>

<template>
  <div class="debug-terminal">
    <!-- 终端标题栏 -->
    <div class="terminal-header" style="background: #333; color: #fff; padding: 8px 12px; border-top-left-radius: 4px; border-top-right-radius: 4px;">
      <div style="display: flex; align-items: center;">
        <div style="display: flex; gap: 6px; margin-right: 15px;">
          <div style="width: 12px; height: 12px; background: #ff5f56; border-radius: 50%;"></div>
          <div style="width: 12px; height: 12px; background: #ffbd2e; border-radius: 50%;"></div>
          <div style="width: 12px; height: 12px; background: #27c93f; border-radius: 50%;"></div>
        </div>
        <span>Terminal</span>
      </div>
    </div>
    
    <!-- 终端内容区域 -->
    <div class="terminal" ref="terminalContainerRef">
      <!-- 终端输出 -->
      <div v-for="(line, index) in terminalOutput" :key="index" style="margin: 2px 0;">{{ line }}</div>
      
      <!-- 命令输入行 -->
      <div style="display: flex; align-items: center;">
        <span style="color: #00ff00; margin-right: 8px;">$</span>
        <input
          ref="terminalInputRef"
          v-model="currentCommand"
          @keydown="handleKeyDown"
          style="flex: 1; background: transparent; border: none; color: #d4d4d4; outline: none; font-family: inherit;"
          :disabled="false"
        />
      </div>
    </div>
  </div>
</template>

<style scoped>
.debug-terminal {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.terminal {
  background: #1e1e1e;
  color: #d4d4d4;
  font-family: 'Consolas', 'Monaco', monospace;
  padding: 10px;
  height: calc(100% - 40px);
  overflow-y: auto;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  white-space: pre-wrap;
  word-wrap: break-word;
}

/* 滚动条样式 */
.terminal::-webkit-scrollbar {
  width: 8px;
}

.terminal::-webkit-scrollbar-track {
  background: #2d2d2d;
}

.terminal::-webkit-scrollbar-thumb {
  background: #555;
  border-radius: 4px;
}

.terminal::-webkit-scrollbar-thumb:hover {
  background: #666;
}

/* 高亮特定文本 */
.terminal .highlight {
  color: #4ec9b0;
}

/* 错误文本 */
.terminal .error {
  color: #f48771;
}

/* 成功文本 */
.terminal .success {
  color: #ce9178;
}
</style>